<template>
    <div >
        <div id="line" ></div>
    </div>
</template>

<script>
    import * as order from '../../api/order'
    export default {
        name: "lineChart",
        data(){
            return{
                xdata:  [],
                ydata:  []
            }
        },
        methods:{
            myEchart(){
                let myEchart = this.$echarts.init(document.getElementById('line'))
                let option = {
                    title: {
                        text: '宠物订单变化',
                        left: 'center'
                    },
                    tooltip : {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        },
                        // formatter: "{a} <br/>{b} : {c}"
                    },
                    xAxis: {
                        type: 'category',
                        data: this.xdata
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [{
                        data: this.ydata,
                        type: 'line'
                    }]
                };
                myEchart.setOption(option)

            },
            initData(){
                let that =this
                order.getLineData().then(function (response) {
                    let result =response.data.data
                    for (let dataKey in result) {
                        that.xdata.push(result[dataKey].date)
                        that.ydata.push(result[dataKey].number)
                    }
                })
            }
        },
        mounted() {
            this.initData()
            this.myEchart()
        },
        watch:{
            xdata(){
                this.myEchart()
            },
            ydata(){
                this.myEchart()
            }
        }
    }
</script>

<style scoped>
    #line{
        width: 100%;
        height: 100%;
    }
</style>
